<template>
  <div class="log-panel" :style="{ height: height + 'px' }">
    <!-- 拖拽调整高度的手柄 -->
    <div 
      class="log-resize-handle" 
      @mousedown="startResize"
      @touchstart="startResize"
    >
      <div class="log-resize-handle-line"></div>
    </div>
    
    <div class="log-panel-content">
      <div class="log-header">
        <div class="log-title">
          <el-icon><Document /></el-icon>
          <span>{{ $t('logPanel.title') }}</span>
        </div>
        <div class="log-actions">
          <el-button text size="small" @click="clearLogs">
            <el-icon><Delete /></el-icon>
            {{ $t('logPanel.clear') }}
          </el-button>
          <el-button text size="small" @click="toggleAutoScroll">
            <el-icon><Refresh /></el-icon>
            {{ autoScroll ? $t('logPanel.disableAutoScroll') : $t('logPanel.autoScroll') }}
          </el-button>
        </div>
      </div>
      
      <div class="log-content" ref="logContentRef">
        <div 
          v-for="(log, index) in logs" 
          :key="index" 
          :class="['log-item', `log-${log.level}`]"
        >
          <span class="log-time">{{ formatTime(log.timestamp) }}</span>
          <span class="log-level">{{ log.level.toUpperCase() }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
        
        <div v-if="logs.length === 0" class="log-empty">
          {{ $t('logPanel.noLogs') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { formatTime } from '@/utils/common'

const { t } = useI18n()

interface LogItem {
  timestamp: Date
  level: 'info' | 'warn' | 'error' | 'success'
  message: string
}

// Props
const props = withDefaults(defineProps<{
  logs?: LogItem[]
  maxLogs?: number
  height?: number
}>(), {
  logs: () => [],
  maxLogs: 100,
  height: 500
})

// Emits
const emit = defineEmits<{
  clear: []
  resize: [height: number]
}>()

// 日志数据 
const logs = computed(() => props.logs || [])
const autoScroll = ref(true)
const logContentRef = ref<HTMLElement>()

// 清空日志
const clearLogs = () => {
  emit('clear')
}

// 切换自动滚动
const toggleAutoScroll = () => {
  autoScroll.value = !autoScroll.value
}

// 开始调整高度
const startResize = (event: MouseEvent | TouchEvent) => {
  event.preventDefault()
  
  const startY = 'touches' in event ? event.touches[0]?.clientY || 0 : event.clientY
  const startHeight = props.height
  
  const handleMouseMove = (e: MouseEvent) => {
    const currentY = e.clientY
    const deltaY = startY - currentY
    const newHeight = Math.max(100, Math.min(600, startHeight + deltaY))
    emit('resize', newHeight)
  }
  
  const handleTouchMove = (e: TouchEvent) => {
    const currentY = e.touches[0]?.clientY || 0
    const deltaY = startY - currentY
    const newHeight = Math.max(100, Math.min(600, startHeight + deltaY))
    emit('resize', newHeight)
  }
  
  const stopResize = () => {
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', stopResize)
    document.removeEventListener('touchmove', handleTouchMove)
    document.removeEventListener('touchend', stopResize)
  }
  
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', stopResize)
  document.addEventListener('touchmove', handleTouchMove)
  document.addEventListener('touchend', stopResize)
}

// 监听日志变化，自动滚动
watch(logs, () => {
  if (autoScroll.value) {
    nextTick(() => {
      if (logContentRef.value) {
        logContentRef.value.scrollTop = logContentRef.value.scrollHeight
      }
    })
  }
}, { deep: true })

// 暴露方法给父组件
defineExpose({
  clearLogs
})
</script>

<style scoped>
.log-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
  border-top: 1px solid #3e3e42;
}

.log-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  cursor: ns-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.log-resize-handle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.log-resize-handle-line {
  width: 40px;
  height: 2px;
  background-color: #666;
  border-radius: 1px;
}

.log-panel-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #2d2d30;
  border-bottom: 1px solid #3e3e42;
}

.log-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #cccccc;
}

.log-actions {
  display: flex;
  gap: 8px;
}

.log-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid #2d2d30;
}

.log-time {
  color: #888;
  font-size: 11px;
  min-width: 80px;
}

.log-level {
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

.log-message {
  flex: 1;
  color: #cccccc;
}

.log-info .log-level {
  color: #409eff;
}

.log-warn .log-level {
  color: #e6a23c;
}

.log-error .log-level {
  color: #f56c6c;
}

.log-success .log-level {
  color: #67c23a;
}

.log-empty {
  text-align: center;
  color: #888;
  padding: 20px;
  font-style: italic;
}


/* 滚动条样式 */
.log-content::-webkit-scrollbar {
  width: 6px;
}

.log-content::-webkit-scrollbar-track {
  background: #2d2d30;
}

.log-content::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.log-content::-webkit-scrollbar-thumb:hover {
  background: #777;
}
</style>
